<!-- 分页 -->
<template>
    <div class="demo-pagination-block">
        <el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4"
            :page-sizes="[5, 10, 15, 20]"  :disabled="disabled" :background="background"
            layout="total, sizes, prev, pager, next, jumper" :total="props.total" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" default-page-size="10" />
    </div>

</template>

<script setup>
import { ref } from 'vue'
const props = defineProps({
    // 总条数
    total: {
        type: Number,
        default: 0
    },
})
//子传父 自定义事件
const emit = defineEmits(['changePage'])
// 当前页
const currentPage4 = ref(1)
// 每页显示条数
const pageSize4 = ref(5)
// const size = ref('100')
const background = ref(false)
// 是否禁用
const disabled = ref(false)

//改变每页显示条数
const handleSizeChange = (val) => {
    console.log(`${val} items per page`)
    emit('changePage',  currentPage4.value,pageSize4.value)
}
//改变当前页
const handleCurrentChange = (val) => {
    console.log(`current page: ${val}`)
    // 子传父
    emit('changePage', currentPage4.value,pageSize4.value)
}




</script>

<style scoped>
.demo-pagination-block+.demo-pagination-block {
    margin-top: 10px;
}

.demo-pagination-block .demonstration {
    margin-bottom: 16px;
}
</style>